<template>
  <div class="pane-phone">
    <el-form :model="form" label-width="80px" :rules="rules" ref="formRef" status-icon>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <div class="send">
          <el-input class="el-code" v-model="form.code" />
          <el-button class="send-btn" type="primary" @click="sendCode" :loading="sendCodeLoading">
            {{ isSendCode ? time + 's' : '发送验证码' }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, computed, onBeforeUnmount } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { localCache } from '@/utils/cache'
  import { CACHE_PHONE, CACHE_TIME } from '@/global/constant'

  defineProps({
    loading: {
      type: Boolean,
      defalut: false
    }
  })

  interface IPhone {
    phone: string
    code: string
  }

  const $emits = defineEmits(['update:loading'])
  const form = reactive<IPhone>({
    phone: localCache.getCache(CACHE_PHONE) ?? '',
    code: ''
  })
  const formRef = ref<FormInstance>()
  const rules = reactive<FormRules<IPhone>>({
    phone: [
      {
        required: true,
        message: '请输入手机号',
        trigger: 'blur'
      },
      {
        // {6,20}数字之间不能使用空格
        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
        message: '请输入正确格式的手机号',
        trigger: 'change'
      }
    ],
    code: [
      {
        required: true,
        message: '请输入验证码',
        trigger: 'blur'
      },
      {
        len: 4,
        message: '验证码长度在4位',
        trigger: 'change'
      }
    ]
  })

  // 发送验证码
  let time = ref<number>(CACHE_TIME)
  let timer = ref<number>()
  // 是否发送验证码 true：发送
  let isSendCode = computed(() => time.value !== CACHE_TIME)
  let sendCodeLoading = ref<boolean>(false)
  // 发送验证码按钮
  function sendCode() {
    // 倒计时还在时(未开始放过，中间放过)
    if (time.value !== CACHE_TIME && time.value !== 0) {
      ElMessage.error('请勿重复发送验证码')
      return
    }

    sendCodeLoading.value = true
    setTimeout(() => {
      sendCodeLoading.value = false
    }, 1000)

    timer.value = setInterval(() => {
      time.value = time.value - 1
      if (time.value <= 0) {
        clearInterval(timer.value)
        time.value = CACHE_TIME
      }
    }, 1000)
  }

  function loginAction(isRemPwd: boolean) {
    formRef.value?.validate((valid) => {
      if (!valid) return
      // 登陆操作
      $emits('update:loading', true)
      // 登陆逻辑
      setTimeout(() => {
        if (isRemPwd) {
          localCache.setCache(CACHE_PHONE, form.phone)
        } else {
          localCache.removeCache(CACHE_PHONE)
        }
        $emits('update:loading', false)
      }, 3000)
    })
  }

  onBeforeUnmount(() => {
    timer.value && clearInterval(timer.value)
  })

  defineExpose({
    loginAction
  })
</script>

<style lang="scss" scoped>
  .pane-phone {
    .send {
      display: flex;
      align-items: center;
      .el-code {
        flex: 1;
        margin-right: 10px;
      }
      .send-btn {
        width: 46%;
      }
    }
  }
</style>
